import { IFlexLayoutElement } from "./IElement.js";
import { IEventChange } from "./IEvent.js";
import { IText, ITextCharacter } from "./IText.js";

export class IRadioIcon extends ITextCharacter {
    constructor() {
        super(true);
        this.SetTagName("ICheckBoxIcon");
        this.SetFontFamily("iconfont");
        this.SetPaddingRight(4);
        this.SetSelected(false);
    }

    SetSelected(selected) {
        if (this.m_selected === selected) return;
        this.m_selected = selected;
        if (selected) {
            this.SetValue("icon-radio-selected");
        } else {
            this.SetValue("icon-radio");
        }
        this.Refresh();
    }

    IsSelected() {
        return this.m_selected;
    }
}

export class IRadio extends IText {
    constructor() {
        super();
        this.SetTagName("IRadio");
        this.SetPadding(this.GetThemePaddingTopBottom(), this.GetThemePaddingTopBottom());
        this.SetStyleDisplay("inline-flex");

        this.m_icon = new IRadioIcon();
        this.m_value = "";

        this.SetAttributeSetterGetter("selected", (value) => { this.SetSelected(value); });
        this.SetAttributeSetterGetter("label", (value) => { this.SetText(value); })
        this.SetAttributeSetterGetter("value", (value) => { this.SetValue(value); });
    }

    SetSelected(selected) { this.m_icon.SetSelected(selected); }
    IsSelected() { return this.m_icon.IsSelected(); }
    SetValue(value) { this.m_value = value; }
    GetValue() { return this.m_value; }

    SetText(text) {
        super.SetText(text);
        this.InsertChildren(this.m_icon, this.GetChildrens()[0]);
    }

    OnClick(event) {
        if (this.IsSelected()) return;
        this.SetSelected(true);

        this.OnChange();

        const parent = this.GetParent();
        if (parent instanceof IRadioGroup) {
            parent.OnChange(this);
        }
    }

    OnChange() {
        const event = new IEventChange();
        event.SetValue(this.value);
        this.DispatchEvent(event);
    }

    // 设置值的方法
    set value(selected) {
        this.SetSelected(selected);
    }

    get value() {
        return this.IsSelected();
    }
}

export class IRadioGroup extends IFlexLayoutElement {
    constructor() {
        super();
        this.SetTagName("ICheckBoxGroup");
        this.SetStyleDisplay("inline-flex");
        this.SetStyleFlexDirection("row");
        this.SetStyleJustifyContent("space-around");
    }

    OnChange(radio) {
        const childrens = this.GetChildrens();
        for (let i = 0; i < childrens.length; i++) {
            const children = childrens[i];
            if (children instanceof IRadio) {
                children.SetSelected(children === radio);
            }
        }

        const event = new IEventChange();
        event.SetValue(radio.GetValue());
        this.DispatchEvent(event);
    }

    set value(value) {
        const childrens = this.GetChildrens();
        for (let i = 0; i < childrens.length; i++) {
            const children = childrens[i];
            if (children instanceof IRadio) {
                const children_value = children.GetValue();
                if (children_value === value) {
                    children.SetSelected(true);
                } else {
                    children.SetSelected(false);
                }
            }
        }
    }
}

export class Radio extends IRadio {
    constructor() {
        super();
        this.SetTagName("Radio");
    }
}

export class RadioGroup extends IRadioGroup {
    constructor() {
        super();
        this.SetTagName("RadioGroup");
    }
}   